<%@ include file="../common/IncludeTop.jsp"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<div id="BackLink">
	<a href="main">Return to Main Menu</a>
</div>
<div id="Catalog" align="center">

<div id="Cart" >

<h2>Shopping Cart</h2>
	<form action="updateCart" method="post">
	<table >
		<tr>
			<th><b>Item ID</b></th>
			<th><b>Product ID</b></th>
			<th><b>Description</b></th>
			<th><b>In Stock?</b></th>
			<th><b>Quantity</b></th>
			<th><b>List Price</b></th>
			<th><b>Total Cost</b></th>
			<th><b>Remove</b></th>
		</tr>

		<c:if test="${sessionScope.cart.numberOfItems == 0}">
			<tr>
				<td colspan="8"><b>Your cart is empty.</b></td>
			</tr>
		</c:if>

		<c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
			<tr>
				<td>
				<a href="item?itemId=${cartItem.item.itemId}" >${cartItem.item.itemId}</a>
				</td>
				<td>${cartItem.item.product.productId}</td>
				<td>${cartItem.item.attribute1} ${cartItem.item.attribute2}
				    ${cartItem.item.attribute3} ${cartItem.item.attribute4}
				    ${cartItem.item.attribute5} ${cartItem.item.product.name}</td>
				<td>${cartItem.inStock}</td>
				<td>
					<input type="text" name="${cartItem.item.itemId}" value="${cartItem.quantity}" onfocusout="updateCartAjax(this)" class="${cartItem.item.itemId}"/>
				</td>
				<td id = "${cartItem.item.itemId}Price"><fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" />
				</td>
				<td id = "${cartItem.item.itemId}"><fmt:formatNumber value="${cartItem.total} " pattern="$#,##0.00" />
				</td>
				<td>
					<a href="remove?workingItemId=${cartItem.item.itemId}" class="Button">Remove</a>
				</td>
			</tr>
		</c:forEach>
		<tr>
			<td colspan="8" align="center">
				<input type="submit" name="updateCart" value="Update Cart"/>
			</td>
		</tr>
	</table>
	</form>
	<script type="text/javascript" src="JS/jquery-3.5.1.js"></script>
	<script type="text/javascript">
		function updateCartAjax(obj){
			let item = obj;
			let productId = item.className;
			let priceO = productId+"Price";
			let totalO = productId;
			let p = document.getElementById(priceO);

			let t = document.getElementById(totalO);

			let a = $(obj).val();
			if(isNaN(a)===false && a>0) {
				let price = p.textContent.trim().substring(1);

				let total = a*price;
				total = total.toFixed(2);
				total = "$"+total;
				t.textContent=total;
			}
			else {
				$.post(
						"updateCartAjax",
						{"productIdAjax":productId},
						function (data) {
							$(obj).val(data);
						},
						"text"
				);
			}

		}
	</script>
	<font color="red">
		${requestScope.msg}
	</font>
	<c:if test="${sessionScope.cart.numberOfItems>0}">
		<a href="CheckOut" class="Button">Proceed to Checkout</a>
    </c:if>
  </div>

<div id="Separator">&nbsp;</div>
</div>
<div id="MyList">
	<c:if test="${sessionScope.account != null}">
		<c:if test="${!sessionScope.authenticated}">
			<c:if test="${!empty sessionScope.account.listOption}">
				<%@ include file="IncludeMyList.jsp"%>
			</c:if>
		</c:if>
	</c:if>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>